import axios from 'axios'
import React, { useState, useEffect } from "react"
import pagestyle from './css/directory.module.scss'
import { Link, useNavigate,useParams } from "react-router-dom"
export default function DirectoryPage() {
    const navigate = useNavigate()
    let param = useParams()
    let [arr, setArr] = useState()
    let [bookName, setbname] = useState('')
    const [ready, setReady] = useState(false)
    let [bid, setBid] = useState()
    let [cid, setCid] = useState()
    useEffect(() => {
        const fn = async () => {
            let result = await axios('/directory', { params: { n1: param.bookID } })
            setArr((result.data)[0])
            setReady(true)
            setbname((result.data)[1])
        }
        fn()
    }, [])
    return (
        <div className={pagestyle.directory_page}>
            <div >
                <div className={pagestyle.header}>
                    <Link to='/'>酷匠网</Link>
                    &nbsp;&nbsp;&gt;
                    <Link to={{pathname:`/xiangqing/${param.bookID}`}}>{bookName}</Link>
                    &nbsp;&nbsp;&gt;
                    目录
                </div>
                <div className={pagestyle.bookTitle}>
                    {bookName}
                </div>
            </div>
            <div className={pagestyle.content}>
                <ul>
                    {
                        ready ? (
                            arr.map((el, index) => {
                                return (
                                    <li key={index} className={pagestyle.items} onClick={() =>{navigate(`/chapter/${el.bookID}/${el.zhangjie}`) }}>
                                        <span>第{el.zhangjie}章：</span>
                                        <span>{el.chapterName}</span>
                                    </li>
                                )
                            })
                        ) : (
                            <div>loading加载中</div>
                        )
                    }
                </ul>
            </div>
        </div >
    )

}